<template>
	<li @click="jump('newsDetail')">
		<div class="images">
			<a>
				<img src="../../assets/imgs/serviceimg2.jpg" alt="" />
			</a>
		</div>
		<div class="info">
			<h3>
				<a> 办公室装修设计中，化繁为简的魔力！ </a>
			</h3>
			<div class="author">by 瑞祥装饰</div>
			<div class="about">
				资讯 :
				<a href="">前沿设计</a>
				<span class="pl10 pr10 cda1a45">/</span>
				TIME
				<strong class="pl10 pr10">/</strong>
				2024.01.09
			</div>
			<p>办公室装修设计中，化繁为简的魔力！</p>
		</div>
	</li>
</template>
<script setup>
	import img from "../../assets/imgs/home/banner.jpg";
	import {
		useRouter
	} from 'vue-router'; // 引入 useRouter

	const router = useRouter(); // 获取路由实例
	const jump = (path) => {
		router.push({
			name: path
		}); // 使用 router 实例进行跳转
	}
</script>

<style lang="less" scoped>
	li {
		width: 100%;
		position: relative;
		padding: 40px 0;


		&:hover::after {
			height: 3px;
			background: #da1a45;
		}

		&:hover .images img {
			transform: scale(1.2);
		}

		&:hover .info .author {
			color: #da1a45;
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background-color: #eeeeee;
			overflow: hidden;
			transition: all 0.4s ease;
		}

		.images {
			float: left;
			width: 350px;
			height: 220px;
			overflow: hidden;
			cursor: pointer;

			img {
				display: block;
				width: 100%;
				height: 100%;
				transition: all 0.4s ease;
			}
		}

		.info {
			min-height: 220px;
			margin-left: 396px;
			overflow: hidden;

			h3 {
				font-size: 20px;
				line-height: 24px;
				height: 48px;
				overflow: hidden;
				margin-bottom: 12px;
				cursor: pointer;

				a {
					color: #333;
					font-weight: normal;

					&:hover {
						color: #da1a45;
					}
				}
			}

			.author {
				color: #212121;
				margin-bottom: 42px;
				font-style: italic;
			}

			.about {
				font-family: MicrosoftYaHei-Bold;
				font-size: 12px;
				font-weight: bold;
				margin-bottom: 18px;
				color: #333;
			}
		}

		&:hover .info h3>a {
			font-weight: bold;
		}
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.pr10 {
		padding-right: 10px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.pl10 {
		padding-left: 10px;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.cda1a45 {
		color: #da1a45;
	}

	.cb3b3b3 {
		color: #b3b3b3;
	}
</style>